<script>
/**
 * @desc 添加出行人
 */

import { mapActions } from 'vuex'
import uncheckedIco from '@/assets/icons/unchecked.svg'
import checkedIco from '@/assets/icons/checked.svg'

export default {
  name: 'traveler-add',
  data: () => ({ uncheckedIco, checkedIco, identityType: '' }),
  methods: {
    ...mapActions('SignIn', ['addTraveler']),
    handleTypeChange(e) {
      this.identityType = e.mp.detail.value
    },
    handleSubmit(e) {
      if (e.mp && e.mp.detail.value) {
        const { name, mobile, identityType, identityNumber } = e.mp.detail.value
        if (name && mobile && identityType && identityNumber) {
          wx.showLoading({ title: '加载中...', mask: true })
          this.addTraveler({ name, mobile, identityType, identityNumber })
            .then(() => {
              wx.navigateBack()
              wx.hideLoading()
            })
            .catch(() => wx.hideLoading())
        } else {
          wx.showModal({ title: '提示', content: '请先完成表单', showCancel: false })
        }
      }
    }
  },

  onUnload() {
    this.identityType = ''
  }
}
</script>

<template>
  <form class="traveler-add" @submit="handleSubmit">
    <div class="form-item">
      <span class="title">姓名:</span>
      <input type="text" name="name" class="val input" placeholder="请输入姓名" maxlength="10"/>
    </div>

    <div class="form-item">
      <span class="title">手机:</span>
      <input type="number" name="mobile" class="val input" placeholder="请输入11位手机号" maxlength="11"/>
    </div>

    <div class="form-item">
      <span class="title">证件类型:</span>
      <radio-group class="val" name="identityType" @change="handleTypeChange">
        <label class="radio-item">
          <span>身份证</span>
          <img :src="identityType=='1'?checkedIco:uncheckedIco" class="radio-check">
          <radio value="1" class="radio-input"/>
        </label>
        <label class="radio-item">
          <span>护照</span>
          <img :src="identityType=='2'?checkedIco:uncheckedIco" class="radio-check">
          <radio value="2" class="radio-input"/>
        </label>
      </radio-group>
    </div>

    <div class="form-item">
      <span class="title">证件号码:</span>
      <input type="text" name="identityNumber" class="val input" placeholder="请输入与证件类型相符的号码" maxlength="18" />
    </div>

    <button formType="submit" class="submit-btn">添加</button>
  </form>
</template>

<style lang="scss" scoped>
.form-item {
  display: flex;
  align-items: center;
  margin: 20px 10px;
  padding-bottom: 20px;
  font-size: 16px;
  border-bottom: 1px solid $border-color;

  .title {
    width: 5em;
  }
  .val {
    flex: 1;
  }

  .radio-item {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
  }

  .radio-check {
    width: 24px;
    height: 24px;
    margin-left: 5px;
  }

  .radio-input {
    display: none;
  }
}

.submit-btn {
  margin: 10px;
  background-color: $main-color;
  color: #ffffff;
}
</style>
